<template>
	<view class="plant-list">
		<view class="list-content" v-if="listData && listData['length'] > 0">
            <view class="list-item" v-for="(item, index) in listData" :key="index" @click="clickItem(item.botanyId)">
                <slot name="checkBox" :checkBox="item" :index="index" :status="item.checkBox"></slot>
                <u-image class="list-img" width="100%" height="180rpx" :src="dnsName + projectName + item.src" shape="square" border-radius="4" :alt="item.src"></u-image>
                <view class="info">
                    <view class="name">
                        {{ item.name }}
                    </view>
                    <view class="desc-descript" v-if="item['baseInfo'] && item.baseInfo['content'] != ''">{{ item.baseInfo['content'] }}</view>
                    <view class="desc-descript" v-else-if="item['formInfo'] && item.formInfo['content'] != ''">{{ item.formInfo['content'] }}</view>
                </view>
            </view>
        </view>
	</view>
</template>

<script>
    import { dnsName, projectName } from '@/common/global.js'
	export default {
        props: ['listData'],
        name: 'plantList',
		data() {
			return {
				dnsName: dnsName,
				projectName: projectName
			};
		},
        methods: {
            // 跳转到详情
            clickItem(id) {
                uni.navigateTo({
                    url: `/pages/botany/botany?botanyId=${id}`
                })
            }
        },
        mounted() {
        }
	}
</script>

<style lang="less" scoped>
    .plant-list {
        width: 100%;
        margin: 20rpx 0;
        .list-content {
            .list-item {
                width: 100%;
                position: relative;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                background: #fff;
                padding: 20rpx;
                margin: 15rpx 0;
                border-radius: 8rpx;
                .list-img {
                    margin-right: 20rpx;
                }
                .info {
                    font: Arial, Helvetica, sans-serif;
                    .name {
                        width: 130rpx;
                        font-size: 30rpx;
                        font-weight: bold;
                        overflow:hidden;
                        white-space: nowrap;
                        text-overflow:ellipsis;
                        margin-bottom: 8rpx;
                        color: #000;
                    }
                    .desc-descript {
                        width: 500rpx;
                        text-align:justify;
                        text-align-last: justify;
                        text-justify: distribute;
                        overflow:hidden;
                        display:-webkit-box;
                        text-overflow:ellipsis;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                    }
                }
            }
        }
    }
</style>
